<section id='analysis'>
  <section id='lineGraphDescription' class='analysisDescription'>
    <h2>{{=XML(T("Select %(up_to_3_locations)s to compare overall resilience") % dict(up_to_3_locations=STRONG(T("up to 3 locations"))))}}</h2>
    <p>{{=T("Explanation about this view")}} &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra facilisis fringilla.</p>
    <section id='regionIndicators'>
      <!-- @ToDo -->
      <h3>JAVA PROVINCE</h3>
      <ul></ul>
    </section>
  </section>
  <section id='treeMapDescription' class='analysisDescription'>
    <h2>{{=XML(T("Click to dive in to regions or rollover to see more"))}}</h2>
    <p>{{=T("Explanation about this view")}} &ndash; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra facilisis fringilla.</p>
    <section id='indicatorSelector'>
      <ul></ul>
    </section>
  </section>
  <section id='analysisIndicatorsChart'></section>
  <section id='analysisControl1'>
    <div>
      <h3>{{=T("Location 1")}}</h3>
      <a id='analysisReset1'>{{=T("RESET")}}</a>
    </div>
    <div class='chartKey'>
      <p>{{=T("MEDIAN")}}</p>
      <div class='medianLine'></div>
      <p>{{=XML(T("ABSOLUTE%(br)sDEVIATION") % dict(br=BR()))}}</p>
      <div class='absoluteDev'></div>
    </div>
    <div class='selectLists'>
      <span id='l0_analysis1'>
        <select id='l0_analysis1s'>
          <option value='' class='none'>{{=CHOOSE_COUNTRY}}</option>
        </select>
      </span>
      <span id='l1_analysis1'>
        <select id='l1_analysis1s'></select>
      </span>
      <span id='l2_analysis1'>
        <select id='l2_analysis1s'></select>
      </span>
      <span id='l3_analysis1'>
        <select id='l3_analysis1s'></select>
      </span>
      <!--
      <span id='l4_analysis1'>
        <select id='l4_analysis1s'></select>
      </span>
      <span id='l5_analysis1'>
        <select id='l5_analysis1s'></select>
      </span>-->
      <span id='lx_analysis1_throbber' class='throbber hidden'></span>
    </div>
  </section>
  <section id='analysisControl2'>
    <div>
      <h3>{{=T("Location 2")}}</h3>
      <a id='analysisReset2'>{{=T("RESET")}}</a>
    </div>
    <div class='chartKey'>
      <p>{{=T("MEDIAN")}}</p>
      <div class='medianLine'></div>
      <p>{{=XML(T("ABSOLUTE%(br)sDEVIATION") % dict(br=BR()))}}</p>
      <div class='absoluteDev'></div>
    </div>
    <div class='selectLists'>
      <span id='l0_analysis2'>
        <select id='l0_analysis2s'>
          <option value='' class='none'>{{=CHOOSE_COUNTRY}}</option>
        </select>
      </span>
      <span id='l1_analysis2'>
        <select id='l1_analysis2s'></select>
      </span>
      <span id='l2_analysis2'>
        <select id='l2_analysis2s'></select>
      </span>
      <span id='l3_analysis2'>
        <select id='l3_analysis2s'></select>
      </span>
      <!--
      <span id='l4_analysis2'>
        <select id='l4_analysis2s'></select>
      <span id='l5_analysis2'>
        <select id='l5_analysis2s'></select>
      </span>-->
      <span id='lx_analysis2_throbber' class='throbber hidden'></span>
    </div>
  </section>
  <section id='analysisControl3'>
    <div>
      <h3>{{=T("Location 3")}}</h3>
      <a id='analysisReset3'>{{=T("RESET")}}</a>
    </div>
    <div class='chartKey'>
      <p>{{=T("MEDIAN")}}</p>
      <div class='medianLine'></div>
      <p>{{=XML(T("ABSOLUTE%(br)sDEVIATION") % dict(br=BR()))}}</p>
      <div class='absoluteDev'></div>
    </div>
    <div class='selectLists'>
      <span id='l0_analysis3'>
        <select id='l0_analysis3s'>
          <option value='' class='none'>{{=CHOOSE_COUNTRY}}</option>
        </select>
      </span>
      <span id='l1_analysis3'>
        <select id='l1_analysis3s'></select>
      </span>
      <span id='l2_analysis3'>
        <select id='l2_analysis3s'></select>
      </span>
      <span id='l3_analysis3'>
        <select id='l3_analysis3s'></select>
      </span>
      <!--
      <span id='l4_analysis3'>
        <select id='l4_analysis3s'></select>
      <span id='l5_analysis3'>
        <select id='l5_analysis3s'></select>
      </span>-->
      <span id='lx_analysis3_throbber' class='throbber hidden'></span>
    </div>
  </section>
  <section class='lineGraphContainer'>
    <div id='lineGraphOuter'>
        <div id='lineGraph' style='height:275px;width:715px;'></div>
    </div>
  </section>
  <section class='treeMapContainer'>
    <div id='treeMap'>
        <div id='treeMapHeaders'></div>
        <div id='treeMapChart'></div>
    </div>
  </section>
  <div class='eventMarkers'></div>
  <div id='analysisTimelineContainer'>
    <div id='analysisTimeline'></div>
    <div id='analysisTimelineLabels'></div>
  </div>
  <section class='analysisKey'>
    <div class='headings'>
      <h3>{{=T("LEGEND")}}</h3>
      <h4>{{=T("RESILIENCE")}}</h4>
    </div>
    <div class='noDataBlock'>
      <div class='nodatasquare'></div>
      <div class='noDataLabel'>{{=T("No Data")}}</div>
    </div>
    <div class='calcLinkAndBlocks'>
      <p>
        <a class='calculationLink' href='#calculation' title="See how it's calculated">
          <span class='arrow'>&rarr;</span> {{=T("Calculation")}}
        </a>
      </p>
      <div class='colorBlocks'>
        <div class='redsquare'>1</div>
        <div class='orangesquare'>2</div>
        <div class='yellowsquare'>3</div>
        <div class='greensquare'>4</div>
        <div class='darkgreensquare'>5</div>
        <div class='lowLabel'>{{=T("LOW")}}</div>
        <div class='highLabel'>{{=T("HIGH")}}</div>
      </div>
    </div>
  </section>
  <section class='analysisTimeline'>
    <!-- @todo: implement time slider -->
    <div class='eventLine'></div>
    <div class='timelineSlider'></div>
  </section>
  <section id='analysisDrawerTop'>
    <h1 id='analysisDrawerLabel'>{{=T("Analysis")}}:&nbsp;</h1>
    <!-- @todo: connect to time slider -->
    <h1><span class='geoName'></span> <span class='geoType'></span> <span class='year'></span></h1>
    <div id='analysisToggle'>
      <select id='analysisIndicator'>
        <option value='overall' selected='selected'>{{=T("Overall Resilience")}}</option>
        <option value='indicators'>{{=T("Indicator Comparison")}}</option>
      </select>
    </div>
    <div id='backToMap'>
      <div></div>
      <a>{{=T("BACK TO MAP VIEW")}}</a>
    </div>
  </section>
</section>